window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {

   canvasApp();

}

function canvasSupport () {
     return Modernizr.canvas;
}

function canvasApp(){

   if (!canvasSupport()) {
          return;
     }else{
      var theCanvas = document.getElementById("canvas");
      var context = theCanvas.getContext("2d");
   }

//the unit object
function unit(posX, posY, type, speed){
	this.posX=posX;
	this.posY=posY;
	this.type=type;
	this.speed=speed;

	//methods
	this.drawSprite=drawSprite;
}

function drawSprite(){
	if (this.type==1){
		context.drawImage(reptile_worker, this.posX-windowX, this.posY-windowY);
	}
}

//the grid object
function grid(){
	this.occupied=0;
}
//the map object
function map(length, width){
	this.grids = new Array(length);
	for (var i = 0; i < length; i++) {
	this.grids[i] = new Array(width);
	}
}

 
var photo = new Image();
var reptile_worker = new Image();
reptile_worker.src="reptile.png";
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "bigmap.png";
var windowWidth = theCanvas.width;
var windowHeight = theCanvas.height;
var windowX = 0;
var windowY = 0;

var currentScale = 1;
var minScale = .2
var maxScale = 3;
var scaleIncrement = .1;

var mouseStartX=0;
var mouseStartY=0;
var mouseEndX=0;
var mouseEndY=0;

var startRect;

var destX=0;
var destY=0;
var speedX=5;
var speedY=5;
//var currentPosX=50;
//var currentPosY=50;

worker = new unit(30,30,1,5);


theCanvas.addEventListener('mousedown', eventMouseDown, false);
theCanvas.addEventListener('mousemove', eventMouseMove, false);
theCanvas.addEventListener('mouseup',   eventMouseUp, false);


function eventMouseDown(event) {
	mouseStartX = event.layerX;
	mouseStartY = event.layerY;
	//theCanvas.width = theCanvas.width;
	//	  context.strokeRect(mouseStartX,mouseStartY,300,500);
	startRect = true;
	
	if (event.which==3){
		destX = event.layerX + windowX;
		destY = event.layerY + windowY;
		destX = Math.floor(destX/32)*32;
		destY = Math.floor(destY/32)*32;
		console.log("destination is" + destX + "," + destY);
		startRect=false;
		}
  
}

function eventMouseMove(event) {
	mouseEndX=event.layerX;
	mouseEndY=event.layerY;
	}

function eventMouseUp(event) {
	startRect = false;
}


function eventPhotoLoaded() {
   startUp();
}



function drawScreen() {
	
	context.fillRect(0,0,theCanvas.width,theCanvas.height);
	
	context.drawImage(photo, windowX, windowY, windowWidth, windowHeight, 0, 0, windowWidth*currentScale,windowHeight*currentScale);

	
	if (worker.posX<destX){
		worker.posX+=worker.speed;}
	if (worker.posX>destX){
		worker.posX-=worker.speed;}
	if (worker.posY<destY){
		worker.posY+=worker.speed;}
	if (worker.posY>destY){
		worker.posY-=worker.speed;}


	
	context.lineWidth = 2;
	context.strokeStyle = "#33FF00";
	context.strokeRect(worker.posX-windowX, worker.posY-windowY, 32,32);
	
	worker.drawSprite();
	
	if (startRect == true) {
		context.lineWidth = 3;
		context.strokeStyle = "#33FF00";
		context.strokeRect(mouseStartX,mouseStartY,mouseEndX-mouseStartX,mouseEndY-mouseStartY);
	}

	
	



}
  
function startUp(){
	setInterval(drawScreen, 1000/60 );
}

theCanvas.oncontextmenu=function(){
	return false
}
	
document.onkeydown = function(e){
	e = e?e:window.event;
	console.log(e.keyCode + "down");
	switch (e.keyCode){
	  case 87:
			//up
			windowY-=10;
			//currentPosY-=10;
			if (windowY<0){
			   windowY = 0;
			}
			break;
	  case 83:
			//down
			windowY+=10;
			//currentPosY+=10;
			if (windowY>photo.height - windowHeight){
			   windowY = photo.height - windowHeight;
			}
			break;
	  case 65:
			//left
			windowX-=10;
			//currentPosX-=10;
			if (windowX<0){
			   windowX = 0;
			}
			break;
	  case 68:
			//right
			windowX+=10;
			//currentPosX+=10;
			if (windowX>photo.width - windowWidth){
			   windowX = photo.width - windowWidth;
			}
			break;
	  case 109:
			//-
			currentScale-=scaleIncrement;
			if (currentScale<minScale){
			   currentScale = minScale;
			}
			break;
	 case 107:
			//+
			currentScale+=scaleIncrement;
			if (currentScale>maxScale){
			   currentScale = maxScale;
		}
	}
}
}

